


/*===========================
      04.ABOUT css 
===========================*/

.about_area{
    background-color: $gray;
    position: relative;
}

.about_image{
    position: absolute;
    top: 0;
    right: 0;
    width: 50%;
    height: 100%;
    
    @media #{$md}{
        width: 100%;
        height: 500px;
        position: relative;
    }
    @media #{$xs}{
        width: 100%;
        height: 400px;
        position: relative;
    }
    
    & .image_content{
        width: 185px;
        height: 185px;
        background-color: $theme-color;
        display: table;
        text-align: center;
        position: relative;
        left: -92px;
        
        @media #{$lg}{
            width: 135px;
            height: 135px;
            left: -78px;
        }
        
        @media #{$md}{
            left: 0;
        }
        @media #{$xs}{
            left: 0;
            width: 135px;
            height: 135px;
        }
        
        & .experience{
            font-size: 24px;
            color: $white;
            font-weight: 500;
            display: table-cell;
            vertical-align: middle;
            
            @media #{$lg}{
                font-size: 18px;
            }
            @media #{$xs}{
                font-size: 18px;
            }
            
            & span{
                font-size: 44px;
                font-weight: 700;
                
                @media #{$lg}{
                    font-size: 36px;
                }
                @media #{$xs}{
                    font-size: 36px;
                }
            }
        }
    }
}



.about_content{
    padding-right: 50px;
    
    @media #{$md}{
        padding-right: 0;
    }
    @media #{$xs}{
        padding-right: 0;
    }
    
    & .main-btn{
        margin-top: 30px;
    }
}









